import React, { useState } from "react";
import { useNavigate } from "react-router-dom";
import { NavBar, Input, Cell, Calendar, Button } from "react-vant";

const Home = () => {
  const [start, setStart] = useState("");
  const [end, setEnd] = useState("");
  const [date, setDate] = useState(new Date().toLocaleDateString());
  const navigate = useNavigate()
  const handleQuery = () => {
    navigate(`/list?start=${start}&end=${end}&date=${date}`)
  }
  return (
    <div>
      <NavBar title="首页" leftArrow={""}></NavBar>
      <Cell>
        <Input
          value={start}
          onChange={(value) => setStart(value)}
          placeholder="出发地"
        ></Input>
      </Cell>
      <Cell>
        <Input
          value={end}
          onChange={(value) => setEnd(value)}
          placeholder="目的地"
        ></Input>
      </Cell>
      <Calendar>
        {(val, actions) => (
          <Cell
            isLink
            value={val ? val.toLocaleDateString() : "请选择日期"}
            onClick={() => actions.open()}
          />
        )}
      </Calendar>

      <Cell>
        <Button round block type="primary" onClick={() => handleQuery()}>查询</Button>
      </Cell>
    </div>
  );
};

export default Home;
